<template>
  <view class="childrenlist_container app_container_page">
    <view class="app_bgwith_wave childrenlist_box">
      <view class="noChild" v-if="childList.length === 0"> 暂无数据 </view>
      <view class="child_card" v-for="child of childList" :key="child.id" @click="handleChildClick(child)">
        <view class="child_avatar" :class="[child.sex === '0' ? 'child_boy' : 'child_girl']"></view>
        <view class="child_info child_name">{{ child.name }}</view>
        <view class="child_info">{{ child.sex === '0' ? '男生' : '女生' }}</view>
        <view class="child_info">{{ child.birthday }}</view>
      </view>
    </view>
    <view class="childrenlist_bottom">
      <view class="add_button" @click="handleAddClick" v-if="childList.length < 3">
        <van-icon name="plus" />
        <text>添加您的孩子</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getChildList } from '@/api/children.js'
export default {
  name: 'childlist',
  // components: {},
  data() {
    return {
      childList: []
    }
  },
  computed: {
    isComparing() {
      return this.$store.state.isComparing
    }
  },
  methods: {
    async getChildrenList() {
      try {
        const res = await getChildList()
        this.childList = res.data
      } catch (error) {
        console.log(error)
      }
    },
    handleChildClick(child) {
      if (this.isComparing) {
        uni.navigateTo({
          url: `/pagesSub/compare/reportSelect?id=${child.id}`
        })
      } else {
        uni.navigateTo({
          url: `/pagesSub/report/list?id=${child.id}`
        })
      }
    },
    handleAddClick() {
      uni.navigateTo({
        url: '/pages/children/add'
      })
    }
  },
  onShow() {
    this.getChildrenList()
  }
}
</script>

<style lang="scss">
.childrenlist_container {
  .childrenlist_box {
    min-height: calc(100vh - 300rpx);
    padding: 30rpx;
  }

  .noChild {
    color: #ddd;
    text-align: center;
  }

  .childrenlist_bottom {
    display: flex;
    justify-content: center;
    padding: 100rpx 0;
  }

  .child_card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
    padding: 15rpx 20rpx;
    border-radius: 40rpx;
    font-size: 30rpx;

    & ~ .child_card {
      margin-top: 30rpx;
    }

    .child_info {
      flex: 1 0 auto;
      padding-left: 15rpx;
      text-align: center;
      @include text-ellipsis();
    }

    .child_name {
      width: 180rpx;
    }
  }

  .child_avatar {
    flex: 0 0 auto;
    height: 100rpx;
    width: 100rpx;
    border-radius: 50%;
    border: 5rpx solid #0060ff;
    background-size: contain;

    &.child_boy {
      background-image: url('#{$BASEURL}/childrenList-boy.png');
    }

    &.child_girl {
      background-image: url('#{$BASEURL}/childrenList-girl.png');
    }
  }

  .add_button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $theme-color;
    height: 100rpx;
    padding: 0 40rpx;
    border-radius: 50px;
    font-size: 40rpx;
    font-weight: 500;
    text-align: center;

    .van-icon {
      font-size: 46rpx;
      font-weight: bold;
      margin-right: 20rpx;
    }
  }
}
</style>
